<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约界面</title>
    <script src="{{url_for('static', filename='js/jquery-3.6.0.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/custom_message_box.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static', filename='css/custom_message_box.css')}}">
    <link href="{{url_for('static', filename='css/layui.css')}}" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            padding: 0;
            background: url("{{url_for('static', filename='img/login_admin_web.jpg')}}") no-repeat center;
            height: 700px;
            background-size: cover;
        }

        h2 {
            margin-top: 20px;
            border-bottom: 2px solid #ccc;
            padding-bottom: 5px;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        #package-items {
            margin-top: 10px;
        }
    </style>
    <script>
        function queryPackages() {
            $.ajax({
                url: "{{ url_for('doctor.query_package') }}",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({}),
                success: function ({ code, data, message }) {
                    if (code !== 0) {
                        showMessage("error", message || "获取套餐列表失败，请稍后再试。", "message", 3000);
                        return;
                    }

                    let packageSelect = $('#package-select');
                    packageSelect.empty();
                    data.forEach(({ id, name, description }) => {
                        packageSelect.append($('<option>', {
                            value: id,
                            text: `${name} - ${description}`
                        }));
                    });
                    loadPackageDetails(data[0].id)
                },
                error: function () {
                    showMessage("error", "网络错误，获取套餐列表失败，请稍后再试。", "message", 3000);
                }
            });
        }

        function loadPackageDetails(packageId) {
            if (!packageId) return;
            $.ajax({
                url: "{{ url_for('doctor.query_package_items') }}",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ package_id: packageId }),
                success: function (response) {
                    if (response.code === 0) {
                        let itemsContainer = $('#package-items');
                        itemsContainer.empty();
                        response.data.forEach(function (item) {
                            // 注意：根据返回的数据结构调整内容展示
                            itemsContainer.append(`<p>项目ID: ${item.id}, 内容: ${item.content}</p>`);
                        });
                    } else {
                        showMessage("error", response.message, "message", 3000);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showMessage("error", "获取项目列表失败：" + textStatus + " " + errorThrown, "message", 3000);
                }
            });
        }

        function submitAppointment() {
            let selectedPackage = $('#package-select').val();
            if (!selectedPackage) {
                showMessage("error", "请选择体检套餐。", "message", 3000);
                return;
            }
            let appointmentDate = $('#appointment-date').val();
            if (!appointmentDate) {
                showMessage("error", "请选择预约日期。", "message", 3000);
                return;
            }
            let timeSlot = $('#appointment-time-slot').val();
            if (!timeSlot) {
                showMessage("error", "请选择预约时间。", "message", 3000);
                return;
            }
            // 实际提交逻辑，这里仅为示例
            showMessage("info", "预约提交中...", "message", 0);
            $.ajax({
                url: "{{url_for('patient.book_appointments')}}",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    package_id: selectedPackage,
                    appointment_time: `${appointmentDate} ${timeSlot}`
                }),
                success: function (response) {
                    if (response.code === 0) {
                        showMessage("success", "预约成功", "message", 3000);

                    } else {
                        showMessage("error", response.message, "message", 3000);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    showMessage("error", "获取项目列表失败：" + textStatus + " " + errorThrown, "message", 3000);
                }
            });
        }

        function resetForm() {
            $('#package-select').val('');
            $('#package-items').empty();
            $('#appointment-date').val('');
            $('#appointment-time-slot').val('');
            $('#message').empty();
        }



        $(document).ready(function () {
            $('#submit-btn').click(submitAppointment); // 绑定点击事件

            queryPackages(); // 页面加载时获取套餐列表
        });
    </script>
</head>

<body>

    <div id="message"></div>

    <form id="appointment-form" style="width: 1000px;margin-top: 200px">
        <h2>选择体检套餐</h2>
        <select title="package-select" id="package-select" onchange="loadPackageDetails(this.value)" style="color:black"
            class="layui-btn layui-btn-primary demo-dropdown-base">
            <option value="" class="layui-icon layui-icon-down layui-font-12">请选择套餐</option>
        </select>

        <h2>套餐包含项目</h2>
        <div id="package-items" class="package-items-container"></div>

        <label for="appointment-date">预约日期</label>
        <input type="date" id="appointment-date">
        <select title="appointment-time-slot" id="appointment-time-slot" style="color:black"
            class="layui-btn layui-btn-primary demo-dropdown-base">
            <option value="" class="layui-icon layui-icon-down layui-font-12">请选择预约时间</option>
            <option value="09:00" class="layui-icon layui-icon-down layui-font-12">09:00</option>
            <option value="10:00" class="layui-icon layui-icon-down layui-font-12">10:00</option>
            <option value="11:00" class="layui-icon layui-icon-down layui-font-12">11:00</option>
            <option value="14:00" class="layui-icon layui-icon-down layui-font-12">14:00</option>
            <option value="15:00" class="layui-icon layui-icon-down layui-font-12">15:00</option>
            <option value="16:00" class="layui-icon layui-icon-down layui-font-12">16:00</option>
            <option value="17:00" class="layui-icon layui-icon-down layui-font-12">17:00</option>
        </select>

        <button type="button" onclick="queryPackages()" class="layui-btn layui-btn-radius">查询套餐</button>
        <button type="button" id="submit-btn" class="layui-btn layui-btn-radius">提交预约</button>
        <button type="button" onclick="resetForm()" class="layui-btn layui-bg-blue">清空选择</button>
    </form>
    <button style="text-align: center" class="layui-btn layui-btn-normal layui-btn-radius">
        <a href="{{ url_for('patient.dashboard_patient_web') }}">返回面板主页</a>
    </button>
</body>

</html>